import { LoadingOutlined, PlusOutlined } from '@ant-design/icons';
import { FormInstance, Image, Upload } from 'antd';
import { UploadChangeParam, UploadFile, UploadProps } from 'antd/es/upload';
import { useState } from 'react';

const UploadComponent = (props: {
  imagesData: any;
  fieldName: string;
  setImagesData: any;
  form: FormInstance;
  imageWidth?: number;
}) => {
  const {
    imagesData,
    fieldName,
    setImagesData,
    form,
    imageWidth = 'auto',
  } = props;

  const [previewOpen, setPreviewOpen] = useState(false);

  const [loading, setLoading] = useState(false);

  const uploadButton = (
    <div style={{ border: 0, background: 'none' }} className="111123">
      {loading ? <LoadingOutlined /> : <PlusOutlined />}
      <div style={{ marginTop: 8 }}>上传</div>
    </div>
  );

  const handleChange = (
    info: UploadChangeParam<UploadFile<any>>,
    imageField: string,
  ) => {
    // console.log(info.fileList);
    // if (info.fileList.length === 0) {
    //   form.setFieldValue('idCardFront', undefined);
    // }

    if (info.file.status === 'uploading') {
      setLoading(true);
      return;
    }

    if (info.file.status === 'done') {
      setLoading(false);
      //   if (imageField === 'officeImages') {
      //     setImagesData({
      //       ...imagesData,
      //       officeImages: [...imagesData.officeImages, info.file.response.data],
      //     });
      //     return;
      //   }
      form.setFieldValue(imageField, true);
      setImagesData({
        ...imagesData,
        [imageField]: info.file.response.data,
      });
    }
  };

  const uploadProps: UploadProps = {
    // fileList: fileList,
    action: '/api/merchant/image',
    accept: 'image/jpeg,image/png',
    name: 'file',
    listType: 'picture-card',
    showUploadList: false,
  };

  const renderImages = () => {
    // if (typeof imagesData[fieldName] === 'object') {
    //   return (
    //     <Image.PreviewGroup>
    //       {imagesData[fieldName].map((item: string, index: number) => {
    //         return <Image key={index} src={item} />;
    //       })}
    //     </Image.PreviewGroup>
    //   );
    // }
    return (
      <Image
        src={imagesData[fieldName]}
        width={imageWidth}
        preview={{
          mask: (
            <div className="flex gap-3">
              <span
                onClick={() => {
                  setPreviewOpen(true);
                }}
              >
                预览
              </span>
              <span
                onClick={() => {
                  setImagesData({
                    ...imagesData,
                    [fieldName]: null,
                  });
                  form.setFieldValue(fieldName, undefined);
                }}
                className={`${imagesData.disable ? 'hidden' : ''}`}
              >
                删除
              </span>
            </div>
          ),
          visible: previewOpen,
          onVisibleChange: (visible) => {
            if (previewOpen) {
              setPreviewOpen(visible);
            }
          },
          destroyOnClose: true,
          // afterOpenChange: (visible) => !visible && setPreviewImage(''),
        }}
        alt="avatar"
        style={{ width: '100%' }}
      />
    );
  };

  return (
    <>
      {imagesData[fieldName] ? (
        renderImages()
      ) : (
        <Upload
          {...uploadProps}
          onChange={(info) => {
            handleChange(info, fieldName);
          }}
        >
          {uploadButton}
        </Upload>
      )}
    </>
  );
};

export default UploadComponent;
